<template>
  <div id="app">
   <h1>小选影响全选</h1>
   <div>
    <div>全选:
     <input v-model="isAll" type="checkbox">
    </div>
    <ul>
      <li v-for="(item,index) in list" :key='index'>
        <input v-model="item.c" type="checkbox">
        {{ item.name }}
      </li>
    </ul>
   </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 加载学生的科目以及成绩的数据
      // 加载原始数据
      list: [
        {
          c:false,
          name: "小紫",
        },
        {
          c:false,
          name: "小蓝",
        },
        {
          c:false,
          name: "小白",
        },
        {
          c:false,
          name: "小黄",
        },
      ],
      allchecked: false, // table表头复选框字段
      subjects: "", //输入的科目存入
      score: "", //成绩存入
      name: "", //姓名存入
      nowTime: "", //考试时间存入'
      isShow1: false,//编辑的内容，默认关闭
      isShow2: true,//编辑按钮，默认开启
    };
  },
 computed:{
  isAll:{
    //使用every方法遍历数组，如果item.c都会true则返回true
  //  return this.list.every(item=>{
  //     return item.c === true
  //   })
  set(val){
     this.list.forEach(item=>{
      item.c = val
     })
  },
  get(){
    // 使用every方法遍历数组，如果item.c都会true则返回true
   //小选框都选中时返回一个ture的值给全选的框，使它选中
   return this.list.every(item=>{
   return item.c === true
 })
  }
 }
}}
</script>

<style>

</style>